<template>
    <div class="shangchen">
        <shop-title></shop-title>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imgurl" :key="index">
                <img :src="imgurl[index]" alt="" />
            </van-swipe-item>
        </van-swipe>
        
        <div class="button">
            <router-link to="Xinpin">
            <div class="first">新品上市</div>
            </router-link>
            <router-link to="ershou">
            <div>二手商城</div>
            </router-link>
        </div>
        <div class="line">热销单品</div>
        <div class="card">
            <van-row>
                <van-col span="6">
                    <img src="../../assets/image2/img_chuwugui.png" alt="" />
                    <div class="text">储物柜</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_zhaoming.png" alt="" />
                    <div class="text">照明灯</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_baozhen.png" alt="" />
                    <div class="text">抱枕</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_jingzi.png" alt="" />
                    <div class="text">镜子</div>
                </van-col>
            </van-row>
        </div>

        <div class="line">家庭常用</div>
        <div class="card">
            <van-row>
                <van-col span="6">
                    <img src="../../assets/image2/img_luodideng.png" alt="" />
                    <div class="text">落地灯</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_zhiwujia.png" alt="" />
                    <div class="text">置物架</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_aijiaodeng.png" alt="" />
                    <div class="text">矮脚灯</div>
                </van-col>
                <van-col span="6">
                    <img src="../../assets/image2/img_maojin.png" alt="" />
                    <div class="text">毛巾</div>
                </van-col>
            </van-row>
        </div>
    <shouye-under></shouye-under>
    </div>
</template>

<script>
import shopTitle from "../../components/shoptitle.vue";
import shouyeUnder from "../../components/shouyeUnder.vue"

export default {
    data() {
        return {
            imgurl: [
                require("../../assets/NewarrivalImg/儿童.jpg"),
                require("../../assets/NewarrivalImg/卧室.jpg"),
                require("../../assets/NewarrivalImg/客厅.jpg"),
            ],
        };
    },
    components: {
        shopTitle,
        shouyeUnder
    },
};
</script>

<style scoped lang='less'>
.my-swipe .van-swipe-item {
    height: 303px;
    img {
        width: 100%;
        height: 303px;
    }
}
.button {
    width: 100%;
    height: 59px;
    margin-top: 28px;
    div {
        padding: 0;
        text-align: center;
        font-size: 30px;
        height: 59px;
        line-height: 59px;
        width: 249px;
        background-color: #ff5555;
        color: white;
        border: none;
        border-radius: 40px;
        float: left;
    }
    .first {
        margin-left: 83px;
        margin-right: 86px;
    }
}
.line {
    margin-top: 25px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: rgba(000, 000, 000, 0.8);
    clear: both;
}
.card {
    width: 710px;
    height: 270px;
    margin: auto;
    box-shadow: 5px 5px 5px 1px #eeeeee, -5px -5px 5px 1px #eeeeee;
    margin-top: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 25px;
    img{
        height: 135px;
        width: 135px;
        margin-top: 35px;
        vertical-align: top;
    }
    .text{
        margin-top: 25px;
    }
}
</style>